﻿<template>
    <el-tabs v-model="moduleName" style="border: 1px solid #cecece; padding: 0 4px;">
        <el-tab-pane v-for="item in modules" :key="item" :label="item.module" :name="item.module">
            <el-table :data="item.items" border row-key="FunID" height="250">
                <el-table-column label="功能ID" prop="FunID" width="90"></el-table-column>
                <el-table-column label="功能" prop="Name" width="100"></el-table-column>
                <el-table-column label="权限" prop="Rights">
                    <template #default="scope">
                        <el-checkbox-group :disabled="disabled" v-model="scope.row.Selected" @change="doChanged">
                            <el-checkbox v-for="item in scope.row.Rights2" :key="item" :label="item"></el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>

</template>

<script>
export default {
    name: "FuncRights",
    emits: ["update:modelValue"],
    props: {
        modelValue: String,
        disabled: {
            type: Boolean,
            default: false
        },
        transData: Function
    },
    data() {
        return {
            records: [],
            modules: [],
            moduleName: "",
            oldValue: "",
        }
    },
    created() {
        let funcs = this.$store.funcs;
        if (!funcs) {
            funcs = this.$server.list("Func", 1, 1000, {}).then(res => {
                if (this.transData) {
                    res = this.transData(res);
                }
                this.$store.funcs = res.records;
                return this.$store.funcs;
            });
        }
        Promise.resolve(funcs).then(rows => {
            var modules = {};
            rows.map(item => {
                let module = modules[item.Module];
                if (!module) {
                    module = [];
                    modules[item.Module] = module;
                }
                module.push(item);
                item.Rights2 = (item.Rights || "").split(";").filter(p => p != "");
                item.Selected = [];
            });
            this.records = rows;

            let aa = [];
            for (var key in modules) {
                aa.push({ module: key, items: modules[key] });
            }
            this.modules = aa;
            if (aa.length > 0) {
                this.moduleName = aa[0].module;
            }
            this.upSelects(this.modelValue);

        })
    },
    methods: {
        doClearn() {
            this.records.map(p => {
                p.Selected = [];
            });
            this.oldValue = "";
        },
        doChanged() {
            var items = [];
            this.records.map(p => {
                if (p.Selected.length > 0) {
                    let s1 = p.FunID + ":[" + p.Selected.join(",") + "]";
                    items.push(s1);
                }
            });
            let str = items.join(";");
            this.oldValue = str;
            this.$emit("update:modelValue", str);
        },
        upSelects(val) {
            let str = val || "";
            let items = str.split(";").filter(p => p != "");

            this.doClearn();
            items.map(item => {
                let ix = item.indexOf(":");
                let funId = item.substr(0, ix);
                let rights = item.substr(ix + 2, item.length - ix - 3).split(",").filter(p => p != "");
                var fun = this.records.filter(p => p.FunID == funId)[0];
                if (fun) {
                    fun.Selected = rights;
                }
            })
        }
    },
    watch: {
        modelValue(val) {
            if (val == this.oldValue) return;
            this.upSelects(val);
        },

    }
}

</script>